<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>同城活动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/literary/apply_index.css">
</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">活动报名</h1>
</header>
<div class="section">
    <!--景点简介-->
    <div class="intro">
        <div class="view">
            <!--<img src="../../images/ce1.jpg" alt="">
            <p>五一相约深山沟农场五一相约深山沟农场五一相约深山沟农场五一相约深山沟农场五一相约深山沟农场</p>-->
        </div>

    </div>
    <div class="apply">
        <form>
            <div>
                <label >姓名：</label>
                <input id="user_name" type="text" name="name" placeholder="请输入姓名">
            </div>
            <div>
                <label>年龄：</label>
                <input id="user_age" type="number" name="age" placeholder="请输入年龄（0-100）" min="1" max="100">
            </div>
            <div id="sex">
                <label>性别：</label>
                <input type="radio" name="sex" value='1' checked='checked'/>男
                <input type="radio" name="sex" value='2'/>女
            </div>
            <div>
                <label>电话：</label>
                <input id="user_mobile" type="tel" name="tell" placeholder="请输入电话">
            </div>
            <div>
                <label>地址：</label>
                <input id="user_address" type="text" name="address" placeholder="请输入家庭地址">
            </div>
            <div class="textarea">
                <label>备注：</label>
                <textarea id="remark" placeholder="0-100字以内(可不填写)" maxlength="100"></textarea>
            </div>
        </form>
        <button class="btn">提交</button>
    </div>
    <!--备注-->
    <div class='remark'>
        <p>您已报名，请勿重复提交</p>
    </div>

</div>

<script src="../../plugins/mui/mui.min.js"></script>
<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<script>
    mui.init();
    mui.plusReady(function(){
        var uid=plus.storage.getItem('cg_user_id');
        var activity=plus.webview.currentWebview().this_id;
        var name=plus.webview.currentWebview().name;
        var path=plus.webview.currentWebview().path;
//      console.log(name+path);
//      console.log(uid);
//      console.log(activity);

        //图片展示部分
        var view='<img src="'+path+'" alt="">'+
                '<p>'+name+'</p>';
        $('.view').append(view);
        //备注长度限制
        mui('.apply').on('keydown','textarea',function(){
            if($('#remark').val().length>=100){
                mui.alert('备注不得超过一百字')
            }
        });

        //提交报名活动
        $('.apply').off('tap').on('tap','.btn',function(e){
            //获取提交数据===去除空格
            var user_name=$('#user_name').val().replace(/\s/g,"");
            var user_mobile=$('#user_mobile').val().replace(/\s/g,"");
            var remark=$('#remark').val().replace(/\s/g,"");
            var address=$('#user_address').val().replace(/\s/g,"");
            var age=$('#user_age').val().replace(/\s/g,"");
            var sex_list= $("input[type='radio']"); 
            var sex_val;
            for(var i=0;i<sex_list.length;i++){
            	if(sex_list[i].checked){
            		sex_val=sex_list[i].value;
            	}
            }
       		var sex=sex_val;
//          console.log('活动id：'+activity+'==='+'用户id：'+uid+'==='+'用户名：'+user_name+'==='+'年龄：'+age+'==='+'地址：'+address+'==='+'联系方式：'+user_mobile+'==='+'备注：'+remark+'==='+'性别：'+sex);
            //列表获取ajax
            if(user_name==''){
                mui.alert('请输入您的姓名')
            }else if(age<0 || age>100){
            	mui.alert('年龄限制在0-100之间')
            }else if(user_mobile==''){
                mui.alert('请输入您的电话')
            }else if(user_mobile.length!=11){
                mui.alert('输入号码格式有误')
            }else if($('#remark').val().length>100){
                mui.alert('备注限制在0-100字以内！')
            }else{
                myAjax('physical/activities/enroll','post',
                        {
                            'name':user_name,
                            'mobile':user_mobile,
                            'age':age,
                            'remark':remark,
                            'userId':uid,
                            'activityId':activity,
                            'sex':sex,
                            'address':address
                        },
                        function(data) {
                            console.log(JSON.stringify(data));
                            if (data.code==0) {
                            	//关闭详情页 
                            	var detailView = plus.webview.getWebviewById("activity_detail");
                            	detailView.close();
                            	
                                mui.openWindow({
                                    url: 'apply_put.html',
                                    id: 'apply_put',
                                    waiting: {
                                        autoShow: true,//自动显示等待框，默认为true
                                        title: '正在加载...',//等待对话框上显示的提示内容
                                    },
                                    show: {
                                        autoShow: true,
                                        aniShow: 'fade-in'
                                    },
                                    extras: {
                                        type: 0
                                    }
                                });
                                $('input').val('');
                                $('textarea').val('');
                            } else {
                                mui.alert(data.msg);
                                $('input').val('');
                                $('textarea').val('');
                            }
                        }
                )
            }

        })
    })
</script>
</body>
</html>
